<template>
  <div class="home">
    <a-space direction="vertical" :style="{ width: '100%' }" :size="[0, 48]">
      <a-layout>
        <a-layout-header :style="headerStyle">
          <homeHeader />
        </a-layout-header>
        <a-layout class="content">
          <a-layout-sider theme="light" width="300" class="content-left">
            <contentLeft />
          </a-layout-sider>
          <a-layout-content class="content-center">
            <contentCenter />
          </a-layout-content>
          <a-layout-sider theme="light" width="300" class="content-right">
            <contentRight />
          </a-layout-sider>
        </a-layout>
      </a-layout>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import homeHeader from "@/components/home/header.vue";
import contentLeft from "@/components/home/contentLeft.vue";
import contentCenter from "@/components/home/contentCenter.vue";
import contentRight from "@/components/home/contentRight.vue";
// header样式
const headerStyle: CSSProperties = {
  textAlign: "center",
  height: 64,
  paddingInline: 50,
  lineHeight: "60px",
  backgroundColor: "#f5f6fa",
};
</script>

<style lang="less" scoped>
.home {
  .content.ant-layout.ant-layout-has-sider {
    height: calc(100vh - 64px);
  }
}
</style>
